<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
	<!-- 1.先引入vue.js -->
	<script type="text/javascript" src="./vue.min.js"></script>
	<!-- 2.引包 引入 核心的插件vue-router -->
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
	<script type="text/javascript">

		// 2.让vue使用该VueRouter创建
		Vue.use(VueRouter);


		//声明组件
		var Login  = {
			template:`<div>我是登录页面</div>`
		};
		var Register  = {
			template:`<div>我是注册页面</div>`
		};
		// 3.创建路由对象

		var router = new VueRouter({
			// 4.配置路由对象
			routes:[
				// 路由匹配的规则
				{
					path:'/login',
					component:Login
				},
				{
					path:'/register',
					component:Register
				}
			]
		});

		// 抛出两个全局的组件 router-link  router-view
		
		var App = {
			template:`
				<div>
					<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
					<router-link to = '/login'>登录</router-link>
					<router-link to = '/register'>注册</router-link>
					
					<!--路由组件的出口-->
					<router-view></router-view>
				</div>
			`
		}

		// Cannot read property 'matched' of undefined
		// 5.将配置好的路由对象关联到vue实例化对象中
		new Vue({
			el:'#app',
			router:router,
			template:`<App />`,
			components:{
				App
			}
		});
	</script>
	
</body>
</html>